<template>
  <div class="info-pos">
    <div class="card" style="width: 80rem; margin-top: 15px " v-for="item in ChoiceList">
      <div class="card-body">
        <h5 class="card-title">{{item.merchant.shopName}}</h5>
        <table class="table">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">#</th>
            <th scope="col">dishName</th>
            <th scope="col">dishPrice</th>
            <th scope="col">dishNum</th>
            <th scope="col">##########</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(dish, index) in item.choiceFullList" :key="dish.dishNumber">

            <th scope="row">
              <button  type="button"  :id="dish.dishNumber" class="btn btn-outline-primary"
                       @click="checked(dish)" style="height: 27px;width: 10px"></button>
            </th>
            <th scope="row">{{++index}}</th>
            <td>{{dish.dishName}}</td>
            <td>{{dish.dishPrice}}</td>
            <td><div class="btn-group" role="group" aria-label="Basic example">
              <button type="button" class="btn btn-secondary" @click.prevent="subNum(dish)">-</button>
              <div type="button" class="btn btn-secondary">{{dish.dishNum}}</div>
              <button type="button" class="btn btn-secondary" @click.prevent="addNum(dish)">+</button>
            </div></td>
            <td><button type="submit" class="btn btn-primary mb-2" style="background-color: red;border: none" @click.prevent="deleteChoice(dish)">删除</button></td>

          </tr>

          </tbody>
        </table>
      </div>
    </div>
    <div class="footer-pos"></div>
  </div>



  <div class="footer">
    <table class="table">
      <thead>
      <tr>
        <th scope="col">支付方式</th>
        <th scope="col">收货地址</th>
        <th scope="col">总价</th>
        <th scope="col">下单</th>
      </tr>
      </thead>

      <tbody>
      <tr>
        <td>
          <select class="form-control" id="exampleFormControlSelect1" v-model="Account"  style="width: 250px">
          <option v-for="item in AccountList" :value=item>{{item.accountNumber}}---{{item.type}}---{{item.currentMoney}}</option>
          </select>
        </td>
        <td>
          <select class="form-control" id="exampleFormControlSelect1" v-model="Address"  style="width: 500px">
            <option v-for="item in AddressList" :value=item>{{item.address}}---{{item.name}}---{{item.phoneNumber}}</option>
          </select>
        </td>
        <td>{{WholePrice}}</td>
        <td><button type="button" class="btn btn-primary" @click.prevent="submitOrder()">下单</button></td>

      </tr>
      </tbody>
    </table>



  </div>
</template>

<script>
export default {
  name: 'Choice',
  data(){
    return{
      Account:{},
      Address:"",
      AddressList:[],
      WholePrice:0.00,
      AccountList:[],
      ChoiceList:[],
      DishList: []
    }
  },



  methods: {

    async getAccount() {
      const {data: res} = await this.$http.get('/account/accountList?phoneNumber='+localStorage.getItem("username_C"))
      this.AccountList=res.data
    },

    async addNum(dish){
      const {data: res} = await this.$http.get('/choice/chooseDish?customerPhoneNumber='
          +localStorage.getItem("username_C")+ '&dishNumber='+dish.dishNumber)
      await this.getChoiceList()

      if(document.getElementById(dish.dishNumber).classList.contains('btn-primary')){
        this.WholePrice=dish.dishPrice+this.WholePrice;
        console.log(typeof(this.WholePrice))
        this.WholePrice=parseFloat( this.WholePrice.toPrecision(12))
      }

    },

    async subNum(dish) {
      if(dish.dishNum!=1){
        const {data: res} = await this.$http.get('/choice/subNum?customerPhoneNumber='
            +localStorage.getItem("username_C")+ '&dishNumber='+dish.dishNumber)
        await this.getChoiceList()

        if(document.getElementById(dish.dishNumber).classList.contains('btn-primary')){
          this.WholePrice=this.WholePrice-dish.dishPrice;
          this.WholePrice=parseFloat( this.WholePrice.toPrecision(12))
        }
      }
      else alert('不能再减了')

    },

    async getChoiceList(){
      const {data: res} = await this.$http.get('/choice/getChoiceList?customerPhoneNumber='
          +localStorage.getItem("username_C"))
      this.ChoiceList=res.data
    },

    async getAddressList() {
      const {data: res} = await this.$http.get('/address/addressList?phoneNumber='+localStorage.getItem("username_C"))
      this.AddressList=res.data
    },

    checked(dish){
      if(document.getElementById(dish.dishNumber).classList.contains('btn-outline-primary')){
        document.getElementById(dish.dishNumber).classList.remove('btn-outline-primary')
        document.getElementById(dish.dishNumber).classList.add('btn-primary')
        this.WholePrice=dish.dishNum*dish.dishPrice+this.WholePrice;
        this.WholePrice=parseFloat( this.WholePrice.toPrecision(12))
        this.DishList.push(dish.dishNumber)

      }
      else {
        document.getElementById(dish.dishNumber).classList.remove('btn-primary')
        document.getElementById(dish.dishNumber).classList.add('btn-outline-primary')
        this.WholePrice=this.WholePrice-dish.dishNum*dish.dishPrice;
        this.WholePrice=parseFloat( this.WholePrice.toPrecision(12))
        for (let i=0; i<this.DishList.length; i++){
          if (this.DishList[i] == dish.dishNumber){
            this.DishList.splice(i, 1)
          }
        }
      }
    },


    async deleteChoice(dish) {
      const {data: res} = await this.$http.get('/choice/delete?dishNumber=' + dish.dishNumber
          +'&customerPhoneNumber='+localStorage.getItem("username_C"))
      await this.getChoiceList()
    },

    async submitOrder() {
      console.log(this.Account);
      if (this.WholePrice == 0) {
        alert("还未点餐")
      } else if (this.Account.accountNumber == null) {
        alert("选择账户")
      } else if (this.Address.address == null) {
        alert("选择地址")
      } else if (this.Account.currentMoney < this.WholePrice) {
        alert("余额不足")
      } else {const allAddress=this.Address.address+'--'+this.Address.name+'--'+this.Address.phoneNumber
        const {data: res} = await this.$http.post('/choice/submitOrder?wholePrice='+this.WholePrice
            +'&accountNumber='+this.Account.accountNumber +'&phoneNumber='+localStorage.getItem("username_C")
            +'&allAddress='+allAddress, this.DishList)}



      await this.getChoiceList()


    }
  },
  created() {
    this.getChoiceList();
    this.getAccount();
    this.getAddressList();
  }


}
</script>

<style lang="less" scoped>
.footer{
  width: 100%;
  height: 125px;
  position: fixed;
  bottom: 0;
  background-color: #b3cdff;
  border-radius: 10px 10px 0 0;

}

.footer-pos{
  width: 100%;
  height: 125px;
  bottom: 0;
  background-color: #b3cdff;
  border-radius: 10px 10px 0 0;

}

.info-pos{
  margin: 0 auto;
  width: 80rem;
  height: 200px;

}
</style>
